<template>
  <div class="empty">
    <img :src="image" alt="" />
    <p class="tips">
      {{
        text
          ? text
          : store?.state?.lang?.lang == "zh"
          ? "您当前没有预约信息~"
          : "You do not currently have appointment information~"
      }}
    </p>
    <slot></slot>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";

import defaultImage from "@/assets/common/empty.png";
const store = useStore();

const props = defineProps({
  image: {
    type: String,
    default: defaultImage,
  },
  text: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.empty {
  padding: 21px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  > img {
    width: 60px;
    height: 64px;
  }
  .tips {
    margin-top: 5px;
    font-size: 13px;
    color: #333333;
  }
  .custom {
  }
}
</style>
